<template>
	<view class="top">
		<view class="icon-button">
			<view class="icon">
			</view>
			<view class="icon" @click="showDialog=!showDialog">
			</view>
		</view>
		<image src="https://ftp.bmp.ovh/imgs/2021/05/c8805d74fd991cc2.png" mode="aspectFit"></image>
		<view class="content">
			<view class="userinfor">
				<view class="u-left">
					<image src="user.avatar" class="portrait"></image>
					<view class="u-left-font">
						<view class="name">{{user.name}}</view>
						<view class="master">支部</view>
						<view class="vit">今日体力值：{{user.physical_strength}}</view>
					</view>
				</view>
				<view class="u-right">
					<view>总积分<text>| {{user.points}}</text> </view>
					<view>总场次<text>| {{user.total}}</text> </view>
					<view>总胜场<text>| {{user.victory}}</text> </view>
				</view>
			</view>
			<view class="pk" @click="matching">
				<!-- <button type="default" @click="matching">1v1pk排位赛</button> -->
			</view>
			<view class="ranking-list">
				<view class="tab">
					<text :class="{'active' : tabIndex==0}" @click="chaneTab(0)">总排行榜</text>
					<text :class="{'active' : tabIndex==1}" @click="chaneTab(1)">所属支部排行榜</text>
				</view>
				<view class="ranking">
					<view>
						<image
							src=""
							mode="" class="portrait"></image>
						<text>我的排名 20</text>
					</view>
					<view class="goid"> 98 </view>
				</view>
				<view class="list">
					<view class="list-item" v-for="(item,index) in rankList" :key="index">
						<view>
							<image src="rankList.avatar" mode=""></image>
							<text>{{item.name}}</text>
						</view>
						<view class="goid"> × {{item.points}} </view>
					</view>
				</view>
			</view>
		</view>
		<request-loading></request-loading>
		<my-dialog :show="showDialog" v-on:closeDialog="closeDialog" />
		<create-room :show="showRoom" v-on:closeRoom="closeRoom" />
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	import createRoom from '../matching/index'
	import myDialog from '../common/dialog'
	export default {
		components: {
			myDialog,
			createRoom
		},
		data() {
			return {
				user: {},
				rank: {},
				rankList: [],
				token: uni.getStorageSync('token'),
				showDialog: false,
				tabIndex: 0, // 选中的
			}
		},
		computed: {
		  ...mapState({
		    showRoom: (state) => state.showRoom,
		  }),
		},
		onLoad() {
			let _this = this
			this.getUserinfor()
			this.getRank()
			// this.$showLoading()
			uni.connectSocket({
				url: 'ws://59.110.222.27:2346?token=' + this.token,
				method: 'GET'
			});

			uni.onSocketMessage(function(res) {
				let msgObj = JSON.parse(res.data)
				if (msgObj.data['matchUser']) {
					if (!msgObj.data['matchUser'].length == 0) {
						uni.showToast({
							title: msgObj.msg,
							icon: 'none'
						});
						_this.$store.commit('show_Room',false)
					}else{
						let data1 ={
							code:1,
							msg:'匹配成功',
							data:{
								matchUser:{
									joinUser:2,
									nickname:'张三',
									pk_id:1
								}
							}
						}
						// uni.showToast({
						// 	title: data1.msg,
						// 	icon: 'none'
						// });
						_this.$store.commit('set_matchUser',data1.data.matchUser)
						_this.$store.commit('befor_start',false)
					}
				}
			});
		},
		methods: {
			chaneTab(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.rankList = this.rank.allList
				} else {
					this.rankList = this.rank.depList
				}
			},
			getUserinfor() {
				uni.request({
					url: this.$baseUrl + '/api/user/index',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code != 1) {
							// 获取用户信息失败处理事件
							return
						}
						this.user = res.data.data.user
					},
				});
			},
			getRank() {
				uni.request({
					url: this.$baseUrl + '/api/user/rank',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code != 1) {
							return
						}
						this.rank = res.data.data
						this.rankList = this.rank.allList
					},
				});
			},
			// 匹配房间
			matching() {
				// this.$store.commit('befor_start',true)
				// this.$store.commit('show_Room',true);
				// uni.sendSocketMessage({
				// 	data: '{"type":1,"data":{"exam_id":1}}'
				// });
				
			},
			closeDialog() {
				this.showDialog = false
			},
			closeRoom() {
				this.showRoom = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	uni-image {
		overflow: visible;
	}

	page {
		background-image: url("https://ftp.bmp.ovh/imgs/2021/05/784e3270c8a09cac.png");
		// background-position: bottom;
		background-size: 100%;
	}

	.icon-button {
		position: absolute;
		top: 31rpx;
		right: 30rpx;
		display: flex;
		justify-content: space-between;
		width: 120rpx;
		height: 48rpx;

		.icon {
			width: 48rpx;
			height: 48rpx;
			background: #F2F2F2;
			border-radius: 50%;
		}
	}

	.goid {
		position: relative;

		&::before {
			position: absolute;
			left: -55rpx;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			width: 40rpx;
			height: 40rpx;
			background-repeat: no-repeat;
			background-size: 40rpx 40rpx;
			background-image: url("");
		}
	}

	.portrait {
		position: relative;

		&::after {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1.06);
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 6rpx solid #db605e;
		}
	}

	.content {
		padding: 0 60rpx 0;
		margin-top: -80rpx;
	}

	.active {
		color: #E4615C;
	}

	.top {}

	.userinfor {
		margin-bottom: 55rpx;
		display: flex;
		justify-content: space-between;

		.u-left {
			display: flex;
			align-items: center;

			image {
				margin-right: 16rpx;
				width: 115rpx;
				height: 115rpx;
				border-radius: 50%;
				background: #ccc;
			}

			.u-left-font {
				display: flex;
				flex-direction: column;
				height: 115rpx;
			}

			.name {
				flex: 1;
				height: 32rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #C65450;
				line-height: 32rpx;
			}

			.master {
				flex: 1;
				height: 23rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #989898;
			}

			.vit {
				flex: 1;
				height: 23rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #D64F4D;
			}
		}

		.u-right {
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;

			text {
				color: #D64F4D;
			}
		}

	}

	.pk {
		margin-bottom: 50rpx;
		width: 630rpx;
		height: 130rpx;
		border-radius: 30rpx;
		background-size: 630rpx 130rpx;
		background-image: url();
	}

	.ranking-list {
		margin-bottom: 50rpx;
		padding: 166rpx 50rpx 70rpx;
		width: 100%;
		height: 1056rpx;
		border-radius: 30rpx;
		background-size: 100% 1056rpx;
		background-image: url("https://ftp.bmp.ovh/imgs/2021/05/57ba0ebf7d7d8449.png");

		.tab {
			font-size: 32rpx;
			padding: 0 0rpx 0 50rpx;
			display: flex;
			justify-content: space-between;

			text:first-child {
				letter-spacing: 5px
			}

			text:active {
				font-weight: 800;
				color: #db605e;
			}
		}

		.ranking {
			margin-top: 45rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view:first-child {
				display: flex;
				align-items: center;
				font-weight: 700;

				image {
					margin-right: 30rpx;
					width: 95rpx;
					height: 95rpx;
					border-radius: 50%;
					background: #ccc;
				}
			}
		}
	}

	.list {
		margin-top: 125rpx;
		padding-left: 85rpx;

		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;

			view:first-child {
				display: flex;
				align-items: center;

				image {
					margin-right: 16rpx;
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
					background: #ccc;
				}
			}
		}
	}
</style>
